<template>
  <div id="kk">
    我是父亲 {{ fmsg }}{{ fArrObj }}
    <MyInfoSon :count="count" :msg="fArrObj" @handlechange="handlechange">
      <template v-slot:header>
        <div>
          {{ fmsg }}
        </div>
      </template>
    </MyInfoSon>

    <MyInfoSon>
      <template #end>
        <div>{{ count }}</div>
      </template>
    </MyInfoSon>

    <!-- 使用具名插槽的步骤：
          1.在父组件使用template标签，为其添加一个  v-slot:插槽名称  的指令，
        如：<template v-slot:header>
            <div>

            </div>
            </template>
        在里面的div里编写插槽内容,v-slot:header 可以简写为#header
          2.子组件使用slot标签，为其添加一个name属性，值为插槽名称 如：
          <slot name="header"> </slot>
      -->
    <!-- Vue3 setup 语法下的父传子，子传父
       父组件里面的子组件标签，添加 :msg="要传的数据"
       子组件通过props接收父组件传来的数据
       语法如下：const props = defineProps(['msg'])
       然后子组件可以直接使用msg来接收父组件传来的数据

         子传父：子组件的数据也可以通过emit来传递给父组件，可以通知父组件更新数据
         语法如下：const emit = defineEmits(['handlechange'])
         然后再子组件的方法里面，使用emit('handlechange',要传的数据)来向父组件传递数据

        父组件接收子组件传来的数据，语法如下：
        <MyInfoSon :msg="msg" @handlechange="handle">
        handlechange="handle" 是监听子组件传来的数据，然后调用handle方法
        handle方法里面的参数就是子组件传来的数据


      
      
      
      -->
  </div>
</template>

<script setup>
import MyInfoSon from '@/views/MyInfoSon.vue'
import { ref } from 'vue'
const fmsg = ref('我是父亲里的数据')
const fc = ref('插槽父组件')
const count = ref(0)
const fArrObj = ref([
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '王五',
    age: 22
  },
  {
    name: '赵六',
    age: 24
  }
])

const handlechange = (value) => {
  console.log(value[0])
  fArrObj.value = value[0]
  count.value += value[1]
}
</script>

<style scoped>
#kk {
  width: 100%;

  background-color: pink;
}
</style>
